<template>
  <div class="palace-grid">
    <div 
      v-for="palace in sortedPalaces"
      :key="palace.position"
      class="palace-card"
      :class="`palace-${getEarthlyBranch(palace.position)}`"
    >
      <div class="palace-header">
        <h3 class="palace-title">
          {{ palace.name }} <span class="branch-text">({{ getEarthlyBranch(palace.position) }})</span>
        </h3>
        
        <!-- 十二生肖图标 -->
        <div class="zodiac-symbol">{{ getZodiacSymbol(palace.position) }}</div>
      </div>
      
      <div class="palace-content">
        <div class="star-section main-stars">
          <p v-if="getPalaceMainStars(palace.position).length > 0">
            <span class="star-label">主星：</span>
            <span class="star-names">{{ getPalaceMainStars(palace.position).join('、') }}</span>
          </p>
          <p v-else class="empty-stars">无主星</p>
        </div>
        
        <div v-if="getPalaceSecondaryStars(palace.position).length > 0" class="star-section secondary-stars">
          <p>
            <span class="star-label">辅星：</span>
            <span class="star-names">{{ getPalaceSecondaryStars(palace.position).join('、') }}</span>
          </p>
        </div>
        
        <div v-if="getPalaceTransformStars(palace.position).length > 0" class="transform-stars">
          <p>
            <span class="star-label">四化：</span>
            <span class="transform-tags">
              <span
                v-for="(star, index) in getPalaceTransformStars(palace.position)"
                :key="index"
                class="transform-tag"
                :class="getTransformClass(star)"
              >
                {{ star }}
              </span>
            </span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PalaceGrid',
  props: {
    chartData: Object
  },
  computed: {
    sortedPalaces() {
      if (!this.chartData || !this.chartData.palaces) return [];
      
      // 按位置排序
      return [...this.chartData.palaces].sort((a, b) => a.position - b.position);
    }
  },
  methods: {
    getEarthlyBranch(position) {
      const branches = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
      return branches[(position - 1) % 12];
    },
    
    getZodiacSymbol(position) {
      // 对应十二生肖的表情符号
      const symbols = ['🐭', '🐂', '🐯', '🐰', '🐲', '🐍', '🐎', '🐑', '🐒', '🐓', '🐕', '🐖'];
      return symbols[(position - 1) % 12];
    },
    
    getTransformClass(star) {
      // 为四化星分配不同的样式类
      const classMap = {
        '化禄': 'transform-lu',
        '化权': 'transform-quan',
        '化科': 'transform-ke',
        '化忌': 'transform-ji'
      };
      
      return classMap[star] || '';
    },
    
    getPalaceMainStars(position) {
      if (!this.chartData || !this.chartData.stars) return [];
      
      const mainStarList = ['紫微', '天机', '太阳', '武曲', '天同', '廉贞', '天府',
                           '太阴', '贪狼', '巨门', '天相', '天梁', '七杀', '破军'];
      
      return Object.entries(this.chartData.stars)
        .filter(([star, pos]) => pos === position && mainStarList.includes(star))
        .map(([star]) => star);
    },
    
    getPalaceSecondaryStars(position) {
      if (!this.chartData || !this.chartData.stars) return [];
      
      const mainStarList = ['紫微', '天机', '太阳', '武曲', '天同', '廉贞', '天府',
                           '太阴', '贪狼', '巨门', '天相', '天梁', '七杀', '破军'];
      const transformStars = ['化禄', '化权', '化科', '化忌'];
      
      return Object.entries(this.chartData.stars)
        .filter(([star, pos]) => pos === position &&
                 !mainStarList.includes(star) &&
                 !transformStars.includes(star))
        .map(([star]) => star);
    },
    
    getPalaceTransformStars(position) {
      if (!this.chartData || !this.chartData.stars) return [];
      
      const transformStars = ['化禄', '化权', '化科', '化忌'];
      
      return Object.entries(this.chartData.stars)
        .filter(([star, pos]) => pos === position && transformStars.includes(star))
        .map(([star]) => star);
    }
  }
};
</script>

<style lang="scss">
// 中国传统颜色变量
$imperial-gold: #d4af37;
$scroll-beige: #f5ecd9;
$cinnabar-red: #8a2924;
$jade-green: #286649;
$ochre-yellow: #c3832a;
$deep-brown: #6d3d14;
$pale-yellow: #fcf4dc;
$ink-black: #272829;
$azure-blue: #1a5599;

// 宫位元素配色（五行）
$element-wood: #68904d;    // 木
$element-fire: #c14536;    // 火
$element-earth: #b5a642;   // 土
$element-metal: #949494;   // 金
$element-water: #5a7d9a;   // 水

// 四化星配色
$transform-lu: #d4b03c;    // 化禄（黄金色）
$transform-quan: #7a3b2e;  // 化权（深红褐色）
$transform-ke: #3d7ca3;    // 化科（蓝色）
$transform-ji: #555555;    // 化忌（灰黑色）

// 排盘网格
.palace-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  
  @media (min-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
  }
  
  @media (min-width: 1024px) {
    grid-template-columns: repeat(4, 1fr);
  }
  
  // 宫位卡片
  .palace-card {
    position: relative;
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: $scroll-beige;
    background-image: url('');
    border: 1px solid rgba($deep-brown, 0.3);
    box-shadow: 0 2px 4px rgba($deep-brown, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, transparent, $deep-brown, transparent);
      opacity: 0.5;
    }
    
    &:hover {
      box-shadow: 0 5px 15px rgba($deep-brown, 0.2);
      transform: translateY(-2px);
    }
    
    // 基于五行属性为不同宫位设置微妙的色彩差异
    &.palace-子, &.palace-亥 {
      border-left: 3px solid $element-water;
      &::before { background: linear-gradient(90deg, transparent, $element-water, transparent); }
    }
    
    &.palace-寅, &.palace-卯 {
      border-left: 3px solid $element-wood;
      &::before { background: linear-gradient(90deg, transparent, $element-wood, transparent); }
    }
    
    &.palace-巳, &.palace-午 {
      border-left: 3px solid $element-fire;
      &::before { background: linear-gradient(90deg, transparent, $element-fire, transparent); }
    }
    
    &.palace-申, &.palace-酉 {
      border-left: 3px solid $element-metal;
      &::before { background: linear-gradient(90deg, transparent, $element-metal, transparent); }
    }
    
    &.palace-丑, &.palace-辰, &.palace-未, &.palace-戌 {
      border-left: 3px solid $element-earth;
      &::before { background: linear-gradient(90deg, transparent, $element-earth, transparent); }
    }
  }
  
  // 宫位标题区域
  .palace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    border-bottom: 1px dashed rgba($deep-brown, 0.2);
    padding-bottom: 0.5rem;
    
    .palace-title {
      font-size: 1.125rem;
      font-weight: bold;
      color: $deep-brown;
      margin: 0;
      
      .branch-text {
        font-weight: normal;
        opacity: 0.8;
      }
    }
    
    .zodiac-symbol {
      font-size: 1.25rem;
      opacity: 0.8;
    }
  }
  
  // 宫位内容区域
  .palace-content {
    font-size: 0.875rem;
  }
  
  // 星曜部分
  .star-section {
    margin-bottom: 0.75rem;
    
    p {
      margin: 0 0 0.25rem 0;
      line-height: 1.5;
    }
  }
  
  // 主星样式
  .main-stars {
    .star-label {
      font-weight: 600;
      color: $deep-brown;
    }
    
    .star-names {
      color: $cinnabar-red;
    }
    
    .empty-stars {
      color: rgba($ink-black, 0.5);
      font-style: italic;
    }
  }
  
  // 辅星样式
  .secondary-stars {
    .star-label {
      font-weight: 600;
      color: $deep-brown;
    }
    
    .star-names {
      color: $azure-blue;
    }
  }
  
  // 四化星部分
  .transform-stars {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba($deep-brown, 0.2);
    
    .star-label {
      font-weight: 600;
      color: $deep-brown;
      display: block;
      margin-bottom: 0.5rem;
    }
    
    .transform-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    
    .transform-tag {
      display: inline-block;
      padding: 0.25rem 0.5rem;
      border-radius: 1rem;
      font-size: 0.75rem;
      background-color: rgba($imperial-gold, 0.1);
      color: $deep-brown;
      
      // 四化星不同样式
      &.transform-lu {
        background-color: rgba($transform-lu, 0.15);
        color: darken($transform-lu, 15%);
        border: 1px solid rgba($transform-lu, 0.3);
      }
      
      &.transform-quan {
        background-color: rgba($transform-quan, 0.15);
        color: darken($transform-quan, 5%);
        border: 1px solid rgba($transform-quan, 0.3);
      }
      
      &.transform-ke {
        background-color: rgba($transform-ke, 0.15);
        color: darken($transform-ke, 10%);
        border: 1px solid rgba($transform-ke, 0.3);
      }
      
      &.transform-ji {
        background-color: rgba($transform-ji, 0.15);
        color: darken($transform-ji, 10%);
        border: 1px solid rgba($transform-ji, 0.3);
      }
    }
  }
}

// 添加中文字体支持
@font-face {
  font-family: 'ChineseFont';
  src: local('SimSun'), local('STFangsong'), local('STKaiti');
  font-display: swap;
}

.palace-grid {
  font-family: 'ChineseFont', serif;
}
</style>